import React, {useState} from 'react';
import '../static/css/AdminIndex.css';
import { Layout, Menu, Breadcrumb, Icon } from 'antd';
import {Route} from 'react-router-dom';
import AddArticle from './AddArticle';
import ArticleList from './ArticleList';

const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;

function AdminIndex (props) {
  const [collapsed , setCollapsed ] = useState(false)
  const onCollapse = () => {
      setCollapsed(true)
  };
  
  const  handleClickArticle = (e)=>{
      if(e.key==="addAtricle"){
        props.history.push('/index/add')
      }else{
        props.history.push('/index/list')
      }

  }
    return (
        <Layout style={{ minHeight: '100vh' }}>
            <Sider collapsible collapsed={collapsed} onCollapse={onCollapse}>
                <div className="logo" />
                <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
                    <Menu.Item key="1">
                        <Icon type="pie-chart" />
                        <span>数据分析</span>
                    </Menu.Item>
                    <Menu.Item key="2">
                        <Icon type="desktop" />
                        <span>添加文章</span>
                    </Menu.Item>
                    <SubMenu
                        key="sub1"
                        onClick={handleClickArticle}
                        title={
                            <span>
                                <Icon type="user" />
                                <span>文章管理</span>
                            </span>
                        }
                    >
                        <Menu.Item key="addAtricle">添加文章</Menu.Item>
                        <Menu.Item key="atricleList">文章列表</Menu.Item>
                        <Menu.Item key="5">xxxxx</Menu.Item>
                    </SubMenu>
                    <Menu.Item key="9">
                        <Icon type="file" />
                        <span>留言管理</span>
                    </Menu.Item>
                </Menu>
            </Sider>
            <Layout>
                {/* <Header style={{ background: '#fff', padding: 0 }} /> */}
                <Content style={{ margin: '0 16px' }}>
                    <Breadcrumb style={{ margin: '16px 0' }}>
                        <Breadcrumb.Item>后台管理系统</Breadcrumb.Item>
                        <Breadcrumb.Item>工作台</Breadcrumb.Item>
                    </Breadcrumb>
                    <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
                    <div>
                    <Route path ='/index/' exact component={AddArticle} ></Route>
                    <Route path ='/index/add/' exact component={AddArticle} ></Route>
                    <Route path ='/index/list/'  component={ArticleList} ></Route>
                    <Route path ='/index/add/:id' exact component={AddArticle} ></Route>
                    </div>
                    </div>
                </Content>
                <Footer style={{ textAlign: 'center' }}>SHQ.com</Footer>
            </Layout>
        </Layout>
    );
}


export default AdminIndex